<template>
	<view>
		<my-navbar title="浏览通知"></my-navbar>
		<view class="app-background"></view>
		<view class="viewNotice-section notice">
			<view class="notice-title">{{ detail.title }}</view>
			<view class="notice-sender">
				<image class="sender-headicon" src="/static/index/headicon_none.png"></image>
				<view>{{ jxyUserInfo.teachSubject }}老师（{{ jxyUserInfo.name }}）{{ sendTime }}</view>
			</view>
			<view class="notice-line"></view>
			<view class="notice-content">{{ detail.content }}</view>
			<view class="notice-images">
				<view
					v-for="(i, j) in detail.images"
					:key="j"
					class="image-item"
					:class="[detail.images.length == 1 ? 'single' : detail.images.length <= 4 ? 'double' : '']"
					@click="clickImage(j)"
				>
					<image class="item-image" :src="i.absolutePath" mode="aspectFill"></image>
				</view>
			</view>
			<view v-if="detail.type === 'school_hours_change' && hometimeText" class="notice-hometime">放学时间 {{ hometimeText }}</view>
			<view class="notice-takers">
				<view v-if="selectedList(i).length" class="taker-item" v-for="(i, j) in detail.post" :key="j">
					<text>@{{ i.gradeName }}{{ i.squadName }}班</text>
					<text>（{{ isSelectAll(i) ? '全班同学' : `${selectedList(i).length}人` }}）</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import util from '@/common/util';
export default {
	data() {
		return {
			detail: {}
		};
	},
	computed: {
		...mapState({
			jxyUserInfo: state => state.User.userInfo.jxyUserInfo
		}),
		sendTime() {
			return util.dateFormat('yyyy-MM-dd hh:mm', new Date().getTime());
		},
		hometimeText() {
			if (!this.detail.hometime) return;
			return util.dateFormat('MM-dd hh:mm', this.detail.hometime);
		},
		// 班级未选中的学生
		unselectedList() {
			return squad => {
				if (!Array.isArray(squad.studentList)) this.$set(squad, 'studentList', []);
				return squad.studentList.filter(i => !i.selected);
			};
		},
		// 班级是否为选中“全班同学”
		isSelectAll() {
			return squad => {
				return this.unselectedList(squad).length === 0;
			};
		},
		// 班级已选中的学生
		selectedList() {
			return squad => {
				if (!Array.isArray(squad.studentList)) this.$set(squad, 'studentList', []);
				return squad.studentList.filter(i => i.selected);
			};
		},
	},
	methods: {
		clickImage(current) {
			const urls = this.detail.images.map(i => i.absolutePath);
			uni.previewImage({
				urls,
				current
			});
		}
	},
	onLoad(options) {
		this.detail = uni.getStorageSync('noticeDetail') || {};
	},
	onUnload() {
		uni.clearStorageSync('noticeDetail');
	}
};
</script>

<style lang="less" scoped>
.viewNotice-section {
	padding: 40rpx 0;
	background-color: #ffffff;
	margin-top: 20rpx;
}

.notice {
	color: #222222;

	.notice-title {
		font-weight: 500;
		font-size: 32rpx;
		padding: 0 30rpx;
	}

	.notice-sender {
		font-size: 28rpx;
		color: #999999;
		margin-top: 10rpx;
		padding: 0 30rpx;

		display: flex;
		align-items: center;

		.sender-headicon {
			width: 44rpx;
			height: 44rpx;
			margin-right: 10rpx;
		}
	}

	.notice-line {
		border-bottom: 2rpx solid #e3e4e6;
		margin: 30rpx;
	}

	.notice-content {
		font-size: 28rpx;
		padding: 0 30rpx;
	}

	.notice-images {
		margin: 25rpx;

		display: flex;
		flex-wrap: wrap;

		.image-item {
			width: 33.33%;
			height: 200rpx;
			box-sizing: border-box;
			padding: 5rpx;

			&.double {
				width: 50%;
				height: 275rpx;
			}

			&.single {
				width: 100%;
				height: 700rpx;
			}

			.item-image {
				width: 100%;
				height: 100%;
				border-radius: 24rpx;
			}
		}
	}

	.notice-hometime {
		height: 54rpx;

		font-size: 24rpx;
		color: #ff6600;
		background-color: #f2f2f2;
		border-radius: 8rpx;
		margin: 20rpx 30rpx 0 30rpx;

		display: flex;
		align-items: center;

		&::before {
			content: '';
			width: 40rpx;
			height: 40rpx;

			background-image: url(/static/notice/icon_initial.png);
			background-size: 100%;
			background-repeat: no-repeat;

			margin: 0 11rpx;
		}
	}

	.notice-takers {
		font-size: 24rpx;
		color: #ff6600;
		padding: 0 15rpx;
		margin-top: 10rpx;

		display: flex;
		flex-wrap: wrap;

		.taker-item {
			height: 48rpx;
			background-color: #f2f2f2;
			border-radius: 24rpx;
			padding: 0 20rpx;
			margin: 10rpx 15rpx 0 15rpx;

			display: flex;
			align-items: center;
		}
	}
}
</style>
